<!-- 模块说明 -->
<template>
    <div>
        <div class="login">
            <van-form @failed="onFailed" @submit="onsubmit">
                <van-cell-group inset>
                    <!-- 通过 pattern 进行正则校验 -->
                    <van-field v-model="user.loginname" name="loginname" placeholder="手机号"
                        :rules="[{ pattern, message: '请输入正确手机号' }]" />
                    <!-- 通过 validator 进行函数校验 -->
                    <van-field v-model="user.password" name="password" placeholder="密码是六位以上组成"
                        :rules="[{ validator, message: '密码是六位以上组成' }]" />
                    <!-- 通过 validator 返回错误提示 -->
                    <!-- <van-field v-model="value3" name="validatorMessage" placeholder="校验函数返回错误提示"
                                            :rules="[{ validator: validatorMessage }]" /> -->
                    <!-- 通过 validator 进行异步函数校验 -->
                    <!-- <van-field v-model="value4" name="asyncValidator" placeholder="异步函数校验"
                                             :rules="[{ validator: asyncValidator, message: '请输入正确内容' }]" /> -->
                </van-cell-group>
                <div style="margin: 16px;">
                    <van-button round block type="primary" native-type="submit">
                        登录
                    </van-button>
                </div>
                <el-row>
                    <router-link to="/register">去注册</router-link>
                </el-row>
            </van-form>
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { closeToast, showLoadingToast } from 'vant';
import { getLogin, ILogin } from '../../api/login'
//成功提示
import { showSuccessToast, showFailToast } from 'vant';
const user = ref<ILogin>({
    loginname: "",
    password: "",
})
const pattern = /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/;

// 校验函数返回 true 表示校验通过，false 表示不通过
// const validator = (val: any) => /1\d{10}/.test(val);
const validator = (val: any) => val.length >= 6

// 校验函数可以直接返回一段错误提示
const validatorMessage = (val: any) => `${val} 不合法，请重新输入`;

// // 校验函数可以返回 Promise，实现异步校验
// const asyncValidator = (val: any) =>
//     new Promise((resolve) => {
//         showLoadingToast('验证中...');

//         setTimeout(() => {
//             closeToast();
//             resolve(val === '1234');
//         }, 1000);
//     });

const onFailed = (errorInfo: any) => {
    console.log('failed', errorInfo);
    showFailToast('登录失败')
};
const onsubmit = async (value: ILogin) => {
    // console.log(value, "success")
    let res = await getLogin(value)
    console.log(res, "res")
    showSuccessToast('登录成功')
}
</script>
<style lang="scss" scoped>
.login {
    margin: 0 auto;
    padding: 20px;
}
</style>
